<template>
  <page-wrap back hide-tab title="关注公众号" class="page" stayStill>
    <view class="contenter">
      <view class="page-title">关注一览职业公众号</view>
      <u-image show-menu-by-longpress="true" width="157px" height="157px" :src="sqmaImg"></u-image>
      <view class="rq-text">长按或扫码关注</view>
      <view class="desc-area">
        <view class="desc-area-title">关注后可收到以下提醒</view>
        <view v-for="item in descAry" :key="item.title">
          <view class="flex-row">
            <u-image width="12px" height="12px" :src="mokImg"></u-image>
            <view class="desc-area-sub-title">{{ item.title }}</view>
          </view>
          <view class="desc-area-sub-desc">{{ item.subTitle }}</view>
        </view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import ShareMixin from '@/mixins/share';
export default {
  mixins: [ShareMixin],
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      mokImg: this.$imgBase + 'mine/makeOk.png',
      sqmaImg: this.$imgBase + 'common/sqma.jpg',

      descAry: [
        {
          title: '消息实时提醒',
          subTitle: '及时接受面试邀请、应聘邀约、简历请求、聊天消息等',
        },
        {
          title: '最新发布提醒',
          subTitle: '当有招聘方对您感兴趣，或有适合您的新职位时，及时提醒帮您留住机会',
        }
      ]
    };
  },
  created() {

  },


  methods: {


  },
};
</script>

<style lang="scss">
.contenter {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url($img-base + 'common/bgv1.png') no-repeat center / 100% 100% #6EAAF8;

  .page-title {
    font-family: DingTalk JinBuTi, DingTalk JinBuTi;
    font-weight: 500;
    font-size: 31px;
    color: #FFFFFF;
    line-height: 33px;
    text-shadow: 0px 1px 1px rgba(0, 62, 122, 0.25);
    text-align: center;
    margin-top: 50px;
    margin-bottom: 126px;
  }

  .rq-text {
    font-family: MiSans, MiSans;
    font-weight: 500;
    font-size: 17px;
    color: #FFFFFF;
    line-height: 24px;
    text-shadow: 0px 1px 3px rgba(0, 62, 122, 0.53);
    text-align: center;
    margin-top: 18px;
  }

  .desc-area {
    margin-top: 23px;
    width: 259px;
    // height: 165px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.33) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-radius: 15px 15px 15px 15px;
    padding: 18px 14px;
    font-family: MiSans, MiSans;

    &-title {
      margin-bottom: 14px;
      font-weight: 500;
      font-size: 15px;
      color: #004F87;
      line-height: 15px;
      text-align: left;
    }

    &-sub-title {
      font-weight: 500;
      font-size: 11px;
      color: #004F87;
      line-height: 11px;
      text-align: left;
    }

    &-sub-desc {
      font-weight: 400;
      font-size: 11px;
      color: #004F87;
      line-height: 17px;
      text-align: left;
      margin-top: 7px;
      margin-bottom: 12px;
    }

  }
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
